<template>
	<view style="
		position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: #00000080;
		display: flex;justify-content: center;flex-direction: column;padding-left: 30px;padding-right: 30px;
		">
		<view style="background-color: #ffffff;border-radius: 8px;
			padding-top: 20px;
		">
			<text style="font-size: 16px;text-align: center;display: block;">添加部门</text>
			<!-- 输入框 -->
			<input type="text" :value="value" placeholder="请输入部门名称" style="background-color: #ebebeb;height: 40px;
			margin: 16px;padding-left: 16px;font-size: 14px;
			" 
			@input="inputHandle"
			/>
			<!-- 按钮 -->
			<view style="display: flex;align-items: center;">
				<view @click="closeHandle" style="flex: 1;height: 44px;display: flex;justify-content: center;align-items: center;">
					<text style="font-size: 16px;color: #202124">取消</text>
				</view>
				<view style="width: 1px;background-color: #ebebeb;height: 26px;"></view>
				
				<view @click="createHandle" style="flex: 1;height: 44px;display: flex;justify-content: center;align-items: center;">
					<text style="font-size: 16px;color: #1677FF;">添加</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value:{type:String}
		},
		data() {
			return {
				
			}
		},
		methods: {
			closeHandle() {
				this.$emit("closeHandle",{});
			},
			createHandle(){
				this.$emit("createHandle",{})
			},
			inputHandle(e){
				this.$emit("input",e.target.value)
			}
		}
	}
</script>

<style>

</style>